<template>
	<div>
		<el-form ref="queryFrom" size="small" :inline="true" :model="queryForm" class="demo-form-inline">
			<el-form-item prop="ipaddr" label="登录地址">
				<el-input v-model="queryForm.ipaddr" style="width: 140px" placeholder="请输入登录地址"></el-input>
			</el-form-item>
			<el-form-item prop="userName" label="用户名称">
				<el-input v-model="queryForm.userName" placeholder="请输入用户名称" style="width: 140px"></el-input>
			</el-form-item>
			<el-form-item prop="status" label="登录状态">
				<el-select v-model="queryForm.status" placeholder="请选择" style="width: 140px">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<!-- 开始时间 -->
			<el-form-item style="display: inline-block">
				<el-form-item label="开始时间" :label-width="'70px'" prop="startTime">
					<el-date-picker v-model="queryForm.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
						placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间" :label-width="'70px'" prop="endTime">
					<el-date-picker v-model="queryForm.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
						placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onQuerySubmit()" size="mini" icon="el-icon-search">搜索</el-button>
				<el-button type="primary" plain icon="el-icon-refresh" size="mini" @click="resetForm()">重置</el-button>
				<el-button @click="deleteData(sels)" type="danger" size="mini" plain icon="el-icon-delete">删除
				</el-button>
			</el-form-item>
		</el-form>
		<!-- 展示数据 -->
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55"> </el-table-column>
			<el-table-column prop="infoId" label="访问编号" width="180">
			</el-table-column>
			<el-table-column prop="userName" label="用户名称" width="120">
			</el-table-column>
			<el-table-column prop="ipaddr" label="登录地址" width="120">
			</el-table-column>
			<el-table-column prop="loginLocation" label="登陆地点" width="120"></el-table-column>
			<el-table-column prop="browser" label="浏览器" width="180"></el-table-column>
			<el-table-column prop="os" label="操作系统" width="180"></el-table-column>
			<el-table-column prop="status" label="登录状态" width="180">
				<template slot-scope="scope">
					<span v-if="scope.row.status == 1">
						<el-tag type="danger"> 失败</el-tag>
					</span>
					<span v-else>
						<el-tag>成功</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="msg" label="操作信息" width="180"></el-table-column>
			<el-table-column prop="loginTime" label="登录日期" width="180"></el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
			:page-sizes="[10, 20, 30]" :page-size="limit" layout="->,total, sizes, prev, pager, next, jumper"
			:total="totalNum">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				limit: 10,
				totalNum: 0,
				queryForm: {
					ipaddr: "",
					userName: "",
					status: "",
					startTime: "",
					endTime: "",
				},
				tableData: [],
				multipleSelection: [],
				sels: [], //选中显示的值
				productList: [],
				options: [{
						value: "0",
						label: "成功",
					},
					{
						value: "1",
						label: "失败",
					},
				],
			};
		},
		methods: {
			//全部选中或全部不选
			handleSelectionChange(val) {
				this.multipleSelection = val;
				this.sels = this.multipleSelection;
			},
			deleteData(rows) {
				var ids = [];
				rows.forEach((element) => {
					ids.push(element.infoId);
				});
				console.log(ids);
				this.$confirm("确定要删除选中的登录日志吗?", "提示")
					.then(() => {
						this.$axios.delete("/log/batchDelete?ids=" + ids).then((response) => {
							console.log();
							if (response[0].code == 10000) {
								this.$message.success(response[0].msg);
								this.myQuery(this.current, this.limit, this.queryForm);
							}
						});
					})
					.catch(() => {});
			},
			resetForm() {
				this.$refs.queryFrom.resetFields();
				this.$axios
					.post(
						"/log/getLogList/" + this.current + "/" + this.limit,
						this.queryForm
					)
					.then((response) => {
						this.tableData = response.data.list;
						this.current = response.data.pageNum;
						this.limit = response.data.pageSize;
						this.totalNum = response.data.total;
					});
			},
			handleSizeChange(val) {
				this.current = 1;
				this.limit = val;
				this.$axios
					.post(
						"/log/getLogList/" + this.current + "/" + this.limit,
						this.queryForm
					)
					.then((response) => {
						console.log(response.data)
						this.tableData = response.data.list;
						this.current = response.data.pageNum;
						this.limit = response.data.pageSize;
						this.totalNum = response.data.total;
					});
			},
			handleCurrentChange(val) {
				this.current = val;
				this.$axios
					.post(
						"/log/getLogList/" + this.current + "/" + this.limit,
						this.queryForm
					)
					.then((response) => {
						console.log(response.data.list)
						this.tableData = response.data.list;
						this.current = response.data.pageNum;
						this.limit = response.data.pageSize;
						this.totalNum = response.data.total;
					});
			},
			//提交进行条件查询
			onQuerySubmit() {
				this.$axios
					.post(
						"/log/getLogList/" + this.current + "/" + this.limit,
						this.queryForm
					)
					.then((response) => {
						this.tableData = response.data.list;
						this.current = response.data.pageNum;
						this.limit = response.data.pageSize;
						this.totalNum = response.data.total;
					});
			},
			myQuery(current, limit, query) {
				this.$axios
					.post("/log/getLogList/" + current + "/" + limit, {
						data: query
					})
					.then((response) => {
						this.tableData = response.data.list;
						this.current = response.data.pageNum;
						this.limit = response.data.pageSize;
						this.totalNum = response.data.total;
					});
			},

		},
		mounted() {
			this.myQuery(this.current, this.limit, this.queryForm);
		},
	};
</script>
<style scoped>
	a {
		color: #409eff;
		font-size: 16px;
	}
</style>
